

<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :router="true"
    @select="selectMenuItem">
    <template v-for="(menuItem1, menuIndex1) in menuList">
      <el-submenu v-if="menuItem1.childrenMenus && menuItem1.childrenMenus.length !== 0" :index="menuItem1.routeUrl" :route="{ name: menuItem1.routeUrl }">
        <template #title>
          <i class="iconfont" :class="menuItem1.icon"></i>
          <span>{{ menuItem1.name }}</span>
        </template>
        <el-menu-item v-for="(menuItem2, menuIndex2) in menuItem1.childrenMenus" :key="menuIndex2" :index="menuItem2.routeUrl" :route="{ name: menuItem2.routeUrl }">
          <i class="iconfont" :class="menuItem2.icon"></i>
          <span>{{ menuItem2.name }}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="menuItem1.routeUrl" :route="{ name: menuItem1.routeUrl }">
        <i class="iconfont" :class="menuItem1.icon"></i>
        <span>{{ menuItem1.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>

</template>


<script>
import { userMenuTreeListApi } from '@/api/modules/admin'
import { allMenu } from '@/utils/menu'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'TheMenu',
  data () {
    return {
      isCollapse: false,

      menuList: []
    }
  },
  computed: {
    ...mapState('menu', ['activeMenu'])
  },
  methods: {
    ...mapMutations('menu', ['SET_ACTIVE_MENU']),
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    selectMenuItem (index) {
      this.SET_ACTIVE_MENU(index)
    },
    async setCurrentMenu () {
      try {
        // const { data } = await userMenuTreeListApi()
        // if(data && data.length !== 0) {
        //   this.menuList = data[0].childrenMenus
        // }
        
        // TODO:暂时不支持动态设置菜单，先用allMenu进行设置菜单
        this.menuList = allMenu
      } catch (err) {
        console.error(err)
      }
    }

  },
  mounted () {
    this.$nextTick(() => {
      this.setCurrentMenu()

    })
  }
}
</script>


<style lang="less">
@import '../styles/variable.less';
.el-menu {
  min-height: calc(100% - 60px);
  border: 0;
  background-color: #001E26;

  .el-menu-item, .el-submenu__title {
    color: #FFFFFFA6;
    
    .iconfont {
      margin-right: 8px;
    }
  }
  // 子菜单的背景颜色
  .el-submenu > ul {
    background-color: #001217;
  }

  .el-menu-item:hover {
    color: #FFFFFF;
    background-color: #001217;
  }
  .el-submenu__title:hover {
    color: #FFFFFF;
    background-color: transparent;
  }

  .is-active {
    color: #FFFFFF;
    background-color: #001217;
    .el-submenu__title {
      color: #FFFFFF;
    }
    .iconfont {
      color: @main-color !important;
    }
  }
  .el-menu-item:focus, .el-menu-item:hover {
    color: #FFFFFF;
    background-color: #001217;
}
}


</style>